<template>
    <div class="my">
        <div class="mybox">
            <!-- 天蓝色背景 -->
            <div class="topbg">
                <!-- 头像 -->
                <div class="head">
                    <img class="img" src="../assets/images/login-logo.png">
                    <!-- <van-uploader v-model="fileList" multiple /> -->
                </div>
                <!-- 登录注册 -->
                <div class="mylogin">
                    <div @click="toLogin" class="login" v-if = "(isLogin=='false')">登录/注册&nbsp;></div>
                    <div @click="toLogin" class="login" v-else >{{name}}</div>

                </div>
            </div>
            <!-- 操作 -->
            <div class="operate">
                <div class="cion-ticket">
                    <div class="cion">
                        <div class="cion-left">
                            <div class="num">666</div>
                            <div class="text">雪王币</div>
                        </div>
                        <div class="cion-rig">
                            <div class="img-box">
                                <img class="img-auto" src="../assets/images/mofapu.webp">
                            </div>
                        </div>
                    </div>
                    <div class="ticket">
                        <div class="ticket-left">
                            <div class="num">8</div>
                            <div class="text">优惠券</div>
                        </div>
                        <div class="ticket-rig">
                            <div class="img-box">
                                <img class="img-auto" src="../assets/images/hongbao.webp">
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 五个操作 -->
                <div class="five">
                    <div class="CDkey">
                        <div class="icon icon-erweima iconfont"></div>
                        <div class="CDkeyc">兑换码</div>
                        <div class="dayu">></div>
                    </div>
                    <div class="invite">
                        <div class="icon icon-yaoqingyouli iconfont"></div>
                        <div class="invitec">邀请有奖</div>
                        <div class="tenfive">15元券包待领取</div>
                        <div class="dayu">></div>
                    </div>
                    <div class="notify">
                        <div class="icon icon-lingdang iconfont"></div>
                        <div class="notifyc">消息通知</div>
                        <div class="dayu">></div>
                    </div>
                    <div class="Feedback">
                        <div class="icon icon-kefu iconfont"></div>
                        <div class="Feedbackc">问题反馈</div>
                        <div class="dayu">></div>
                    </div>
                    <div class="aboutus" @click="exitLogin">
                        <div class="icon icon-zhuyi iconfont"></div>
                        <div class="aboutusc">关于我们</div>
                        <div class="dayu">></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        
        name:'My',
        data(){
            return{
                // 是否登录标识符
                isLogin:'',
                name:''
            }
        },
        mounted() {
            // this.$toast('加载中');

        },
        created(){
            // 获取登录标识符
            this.isLogin = localStorage.getItem('isLogin')
            console.log(this.isLogin);
            // 获取登录信息的名字
            if(JSON.parse(localStorage.getItem('userInfo'))){

                this.name = JSON.parse(localStorage.getItem('userInfo')).name
                console.log(this.name);
            }
        },
        methods:{
            toLogin(){
                // 判断是否登录
                // 已登录不跳转登录页面
                if(this.isLogin=='false'){

                    this.$router.push({
                        name:"Login"
                    })
                }else{
                    return
                }
            },
            // 进入退出登录选项页面
            exitLogin(){
                this.$router.push({
                    name:'ExitLogin'
                })
            }
        },
    }
</script>

<style lang="less" scoped>
    .my{
        width: 100%;
        height: 617px;
        background-color: #f8f8f8;
        .mybox{
            width: 350px;
            height: 617px;
            background-color: #f8f8f8;
            .operate{
                width: 350px;
                height: 437px;
                background-color: #f8f8f8;
                margin: 0 12.5px;
                position: relative;
                top: -20px;
                left: 0;
                border-top-left-radius: 10px;
                border-top-right-radius: 10px;
                .five{
                    width: 350px;
                    height: 300px;
                    // background-color: green;
                    margin-top: 10px;
                    .CDkey,.invite,.notify,.Feedback,.aboutus{
                        width: 350px;
                        height: 60px;
                        background-color: #fff;
                        display: flex;
                        align-items: center;
                        color: #737373;
                       .dayu{
                            font-size: 16px;
                            margin-left: 7px;
                        }
                        .CDkeyc,.invitec,.notifyc,.Feedbackc,.aboutusc{
                            margin: 0 205px 0 0 ;
                            font-size: 16px;
                        }
                        .invitec{
                            margin-right: 118px;

                        }
                        .CDkeyc{
                            margin-right: 220px;
                        }
                        .icon{
                            width: 30px;
                            height: 30px;
                            // background-color: pink;
                            margin: 0px 10px 0 15px;
                            font-size: 30px;
                        }
                    }
                    .CDkey{
                        border-top-left-radius: 10px;
                        border-top-right-radius: 10px;
                    }
                    .aboutus{
                        border-bottom-left-radius: 10px;
                        border-bottom-right-radius: 10px;
                    }
                    .invite{
                        .tenfive{
                            font-weight: 700;
                            color: #e4393c;
                        }

                    }
                }
                .cion-ticket{
                    width: 350px;
                    height: 70px;
                    // background-color: green;
                    display: flex;
                    .cion,.ticket{
                        width: 49%;
                        height: 100%;
                        background-color: #fff;
                        border-radius: 10px;
                    }
                    .cion{
                        margin-right: 10px;
                        display: flex;
                        border-top-left-radius: 10px;
                        border-top-right-radius: 10px;
                        .cion-left,.cion-rig{
                            width: 50%;
                            height: 100%;
                        }

                        .cion-left{
                            .num{
                                margin: 15px 0 0 10px;
                                font-size: 16px;
                                font-weight: 550;
                            }
                            .text{
                                margin: 5px 0 0 10px;
                                font-size: 16px;
                                color: #a0a0a0;
                            }
                        }
                        .cion-rig{
                            .img-box{
                                width: 50px;
                                height: 50px;
                                margin: 11px 0 0 30px;
                            }
                        }
                    }
                    .ticket{
                        .ticket-left,.ticket-rig{
                            width: 50%;
                            height: 100%;
                            display: inline-block;
                        }
                        .ticket-left{
                            .num{
                                margin: 15px 0 0 10px;
                                font-size: 16px;
                                font-weight: 550;
                                width: 55px;
                                display: inline-block;
                            }
                            .text{
                                margin: 5px 0 0 10px;
                                font-size: 16px;
                                color: #a0a0a0;
                                width: 55px;
                                display: inline-block;
                            }
                        }
                        .ticket-rig{
                            display: inline-block;
                            margin-bottom: -13px;
                            .img-box{
                                width: 50px;
                                height: 50px;
                                margin: 11px 0 0 30px;
                            }
                        }
                    }
                }
            }
            .topbg{
                width: 375px;
                height: 200px;
                background-color: #ddf4ff;
                margin: 0 auto;
                display: flex;
                align-items: flex-end;
                .head{
                    width: 60px;
                    height: 60px;
                    background-color: pink;
                    display: inline-block;
                    margin: 0 10px 40px 20px;
                    border-radius: 50%;
                    .img{

                        margin: 9px 0 0 8px;
                    }
                }
                .login{
                    margin: 0 0 60px 0;
                    font-size: 16px;
                    font-weight: 550;
                }
            }
        }
    }
</style>